import { FC, useEffect, useState } from 'react';
import styles from './tags.less';
import { useDispatch, useSelector } from 'umi'
import { TagList } from '@/utils/poster';
import { Form, Input, Button, message } from 'antd';
const Tags: FC = () => {
    const dispatch = useDispatch();
    const result = useSelector((state: { tags: any }) => state.tags);
    const [params, setparams] = useState({ label: '', value: '' });
    const [id, setid] = useState('');
    //连接form
    const [form] = Form.useForm();
    //标签列表
    useEffect(() => {
        dispatch({
            type: 'tags/getTag'
        })
    }, []);
    //添加标签
    // useEffect(() => {
    //     dispatch({
    //         type: 'tags/addTag',
    //         payload: { params }
    //     })
    // }, [params]);
    //详情
    useEffect(() => {
        if (id) {
            let res = result.getTag.filter((item: TagList) => item.id == id)[0];
            form.setFieldsValue(res)
        } else {
            form.setFieldsValue('')
        }
    }, [id])
    const error = () => {
        message.error('该用户没有权限');
    };
    const onFinish = (values: any) => {
        error()
        // setparams({ ...params, label: values.label, value: values.value });
    };
    return <div className={styles.tags}>
        <div className={styles.left}>
            <p>添加标签</p>
            <Form
                name="basic"
                form={form}
                labelCol={{ span: 10 }}
                wrapperCol={{ span: 16 }}
                onFinish={onFinish}>
                <Form.Item
                    label=""
                    name="label"
                >
                    <Input placeholder='请输入标签名称' style={{ marginTop: 20, marginLeft: 20 }} />
                </Form.Item>
                <Form.Item
                    label=""
                    name="value"
                >
                    <Input placeholder='请输入标签值' style={{ marginTop: 20, marginLeft: 20 }} />
                </Form.Item>
                <Form.Item>
                    {
                        id ? <div style={{ marginLeft: 20, marginTop: 20 }}>
                            <Button type="primary" htmlType="submit">更新</Button>
                            <Button onClick={() => { setid('') }}>返回添加</Button>
                            <Button danger style={{ marginLeft: 10 }}>删除</Button>
                        </div> : <Button type="primary" htmlType="submit" style={{ marginTop: 20, marginLeft: 20 }}>保存</Button>
                    }
                </Form.Item>
            </Form>
        </div>
        <div className={styles.right}>
            <p>所有标签</p>
            <p>
                {
                    result.getTag && result.getTag.map((item: TagList, index: number) => {
                        return <span key={index} onClick={() => {
                            setid(item.id)
                        }}>{item.label}</span>
                    })
                }
            </p>

        </div>
    </div>
}
export default Tags;